<script setup>
import { ref, onMounted, computed } from 'vue';

// 数据
const scenicSpots = ref([]);
const cities = ref([]);
const loading = ref(true);
const searchQuery = ref('');
const selectedCity = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const showAddModal = ref(false);
const showEditModal = ref(false);
const currentSpot = ref(null);

// 新增/编辑表单
const spotForm = ref({
  spot_name: '',
  city_id: '',
  description: '',
  address: '',
  opening_hours: '',
  ticket_price: '',
  image_url: ''
});

// 过滤后的景点列表
const filteredSpots = computed(() => {
  let result = scenicSpots.value;
  
  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    result = result.filter(spot => 
      spot.spot_name.toLowerCase().includes(query) ||
      spot.description.toLowerCase().includes(query) ||
      spot.address.toLowerCase().includes(query)
    );
  }
  
  // 城市过滤
  if (selectedCity.value) {
    result = result.filter(spot => spot.city_id === parseInt(selectedCity.value));
  }
  
  return result;
});

// 分页数据
const paginatedSpots = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredSpots.value.slice(start, end);
});

// 总页数
const totalPages = computed(() => {
  return Math.ceil(filteredSpots.value.length / pageSize.value);
});

onMounted(() => {
  fetchData();
});

// 模拟获取数据
const fetchData = () => {
  loading.value = true;
  
  // 模拟API调用
  setTimeout(() => {
    // 城市数据
    cities.value = [
      { id: 1, city_name: '上海', region_id: 1 },
      { id: 2, city_name: '杭州', region_id: 1 },
      { id: 3, city_name: '南京', region_id: 1 },
      { id: 4, city_name: '北京', region_id: 3 },
      { id: 5, city_name: '成都', region_id: 4 }
    ];
    
    // 景点数据
    scenicSpots.value = [
      {
        id: 1,
        spot_name: '外滩',
        city_id: 1,
        city_name: '上海',
        description: '外滩是上海的标志性景点，拥有众多历史建筑和黄浦江美景。',
        address: '上海市黄浦区中山东一路',
        opening_hours: '全天开放',
        ticket_price: '免费',
        image_url: '/src/assets/1.webp',
        created_at: '2023-01-10'
      },
      {
        id: 2,
        spot_name: '东方明珠',
        city_id: 1,
        city_name: '上海',
        description: '上海的地标性建筑，提供全景观光。',
        address: '上海市浦东新区世纪大道1号',
        opening_hours: '8:00-21:30',
        ticket_price: '120元',
        image_url: '/src/assets/2.webp',
        created_at: '2023-01-15'
      },
      {
        id: 3,
        spot_name: '西湖',
        city_id: 2,
        city_name: '杭州',
        description: '中国著名的风景名胜区，有"人间天堂"的美誉。',
        address: '浙江省杭州市西湖区龙井路1号',
        opening_hours: '全天开放',
        ticket_price: '免费',
        image_url: '/src/assets/3.webp',
        created_at: '2023-02-01'
      },
      {
        id: 4,
        spot_name: '中山陵',
        city_id: 3,
        city_name: '南京',
        description: '孙中山先生的陵寝，中国近代建筑的杰作。',
        address: '江苏省南京市玄武区石象路7号',
        opening_hours: '8:30-17:00',
        ticket_price: '免费',
        image_url: '/src/assets/4.webp',
        created_at: '2023-02-10'
      },
      {
        id: 5,
        spot_name: '故宫',
        city_id: 4,
        city_name: '北京',
        description: '世界上现存规模最大、保存最为完整的木质结构古建筑群。',
        address: '北京市东城区景山前街4号',
        opening_hours: '8:30-17:00',
        ticket_price: '60元',
        image_url: '/src/assets/5.webp',
        created_at: '2023-02-20'
      },
      {
        id: 6,
        spot_name: '长城',
        city_id: 4,
        city_name: '北京',
        description: '世界文化遗产，中华民族的象征。',
        address: '北京市怀柔区',
        opening_hours: '7:30-18:00',
        ticket_price: '40元',
        image_url: '/src/assets/6.webp',
        created_at: '2023-03-05'
      },
      {
        id: 7,
        spot_name: '都江堰',
        city_id: 5,
        city_name: '成都',
        description: '世界文化遗产，中国古代水利工程的杰作。',
        address: '四川省成都市都江堰市',
        opening_hours: '8:00-18:00',
        ticket_price: '90元',
        image_url: '/src/assets/7.webp',
        created_at: '2023-03-15'
      },
      {
        id: 8,
        spot_name: '宽窄巷子',
        city_id: 5,
        city_name: '成都',
        description: '成都遗留下来的较成规模的清朝古街道。',
        address: '四川省成都市青羊区金河路口宽窄巷子',
        opening_hours: '全天开放',
        ticket_price: '免费',
        image_url: '/src/assets/8.webp',
        created_at: '2023-03-20'
      }
    ];
    
    loading.value = false;
  }, 800);
};

// 打开新增景点模态框
const openAddModal = () => {
  spotForm.value = {
    spot_name: '',
    city_id: cities.value.length > 0 ? cities.value[0].id : '',
    description: '',
    address: '',
    opening_hours: '',
    ticket_price: '',
    image_url: ''
  };
  showAddModal.value = true;
};

// 打开编辑景点模态框
const openEditModal = (spot) => {
  currentSpot.value = { ...spot };
  spotForm.value = {
    spot_name: spot.spot_name,
    city_id: spot.city_id,
    description: spot.description,
    address: spot.address,
    opening_hours: spot.opening_hours,
    ticket_price: spot.ticket_price,
    image_url: spot.image_url
  };
  showEditModal.value = true;
};

// 删除景点
const deleteSpot = (spotId) => {
  if (confirm('确定要删除该景点吗？')) {
    scenicSpots.value = scenicSpots.value.filter(spot => spot.id !== spotId);
  }
};

// 提交新增景点
const submitAddSpot = () => {
  // 简单验证
  if (!spotForm.value.spot_name || !spotForm.value.city_id || !spotForm.value.address) {
    alert('请填写景点名称、所在城市和地址');
    return;
  }
  
  const city = cities.value.find(c => c.id === parseInt(spotForm.value.city_id));
  
  const newSpot = {
    id: Date.now(),
    ...spotForm.value,
    city_id: parseInt(spotForm.value.city_id),
    city_name: city ? city.city_name : '',
    created_at: new Date().toISOString().split('T')[0]
  };
  
  scenicSpots.value.push(newSpot);
  showAddModal.value = false;
};

// 提交编辑景点
const submitEditSpot = () => {
  // 简单验证
  if (!spotForm.value.spot_name || !spotForm.value.city_id || !spotForm.value.address) {
    alert('请填写景点名称、所在城市和地址');
    return;
  }
  
  const index = scenicSpots.value.findIndex(spot => spot.id === currentSpot.value.id);
  if (index !== -1) {
    const city = cities.value.find(c => c.id === parseInt(spotForm.value.city_id));
    
    scenicSpots.value[index] = {
      ...scenicSpots.value[index],
      ...spotForm.value,
      city_id: parseInt(spotForm.value.city_id),
      city_name: city ? city.city_name : ''
    };
  }
  
  showEditModal.value = false;
};

// 重置筛选条件
const resetFilters = () => {
  searchQuery.value = '';
  selectedCity.value = '';
  currentPage.value = 1;
};

// 分页控制
const changePage = (page) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
  }
};
</script>

<template>
  <div>
    <div class="mb-6">
      <h2 class="text-2xl font-bold text-gray-900">旅游景点管理</h2>
      <p class="text-gray-600">管理平台的所有旅游景点数据</p>
    </div>

    <!-- 搜索和筛选 -->
    <div class="mb-6 bg-white p-4 rounded-lg shadow">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="relative rounded-md shadow-sm">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <i class="fa fa-search text-gray-400"></i>
          </div>
          <input 
            type="text" 
            v-model="searchQuery"
            class="block w-full rounded-md border-gray-300 pl-10 pr-3 py-2 text-sm placeholder-gray-400 focus:outline-none focus:ring-primary focus:border-primary"
            placeholder="搜索景点名称、描述或地址"
          >
        </div>
        <div>
          <select 
            v-model="selectedCity"
            class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
          >
            <option value="">所有城市</option>
            <option v-for="city in cities" :key="city.id" :value="city.id">
              {{ city.city_name }}
            </option>
          </select>
        </div>
        <div class="flex space-x-2">
          <button 
            @click="resetFilters"
            class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50"
          >
            <i class="fa fa-refresh mr-2"></i> 重置
          </button>
          <button 
            @click="openAddModal"
            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
          >
            <i class="fa fa-plus mr-2"></i> 添加景点
          </button>
        </div>
      </div>
    </div>

    <!-- 景点列表 -->
    <div class="bg-white shadow overflow-hidden rounded-lg">
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                景点名称
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                所在城市
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                地址
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                门票价格
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                创建时间
              </th>
              <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                操作
              </th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <template v-if="loading">
              <tr v-for="i in 5" :key="i">
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="h-5 bg-gray-200 rounded animate-pulse"></div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="h-5 bg-gray-200 rounded animate-pulse"></div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="h-5 bg-gray-200 rounded animate-pulse"></div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="h-5 bg-gray-200 rounded animate-pulse"></div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="h-5 bg-gray-200 rounded animate-pulse"></div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                  <div class="flex justify-end space-x-2">
                    <div class="h-8 w-8 bg-gray-200 rounded animate-pulse"></div>
                    <div class="h-8 w-8 bg-gray-200 rounded animate-pulse"></div>
                  </div>
                </td>
              </tr>
            </template>
            <template v-else>
              <tr v-for="spot in paginatedSpots" :key="spot.id" class="hover:bg-gray-50 transition-colors">
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="flex items-center">
                    <div v-if="spot.image_url" class="flex-shrink-0 h-10 w-10">
                      <img class="h-10 w-10 rounded-full object-cover" :src="spot.image_url" :alt="spot.spot_name">
                    </div>
                    <div v-else class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center text-gray-500">
                      <i class="fa fa-camera"></i>
                    </div>
                    <div class="ml-4">
                      <div class="text-sm font-medium text-gray-900">{{ spot.spot_name }}</div>
                      <div class="text-xs text-gray-500 truncate max-w-xs" style="max-width: 200px;">
                        {{ spot.description }}
                      </div>
                    </div>
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-gray-900">{{ spot.city_name }}</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-gray-500 truncate max-w-xs" style="max-width: 150px;">
                    {{ spot.address }}
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                    {{ spot.ticket_price }}
                  </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  {{ spot.created_at }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                  <button 
                    @click="openEditModal(spot)"
                    class="text-primary hover:text-primary/80 mr-3"
                  >
                    编辑
                  </button>
                  <button 
                    @click="deleteSpot(spot.id)"
                    class="text-red-600 hover:text-red-800"
                  >
                    删除
                  </button>
                </td>
              </tr>
              <tr v-if="paginatedSpots.length === 0">
                <td colspan="6" class="px-6 py-10 text-center text-gray-500">
                  没有找到匹配的景点
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
      
      <!-- 分页 -->
      <div v-if="!loading && totalPages > 1" class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
        <div class="flex-1 flex justify-between sm:hidden">
          <button 
            @click="changePage(currentPage - 1)"
            :disabled="currentPage === 1"
            class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
          >
            上一页
          </button>
          <button 
            @click="changePage(currentPage + 1)"
            :disabled="currentPage === totalPages"
            class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
          >
            下一页
          </button>
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
          <div>
            <p class="text-sm text-gray-700">
              显示 <span class="font-medium">{{ Math.max(1, (currentPage - 1) * pageSize + 1) }}</span> 到 <span class="font-medium">{{ Math.min(currentPage * pageSize, filteredSpots.length) }}</span> 条，共 <span class="font-medium">{{ filteredSpots.length }}</span> 条结果
            </p>
          </div>
          <div>
            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
              <button 
                @click="changePage(currentPage - 1)"
                :disabled="currentPage === 1"
                class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
              >
                <i class="fa fa-chevron-left"></i>
              </button>
              <button 
                v-for="page in Math.min(5, totalPages)"
                :key="page"
                @click="changePage(page)"
                class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
                :class="{ 'bg-primary text-white': currentPage === page }"
              >
                {{ page }}
              </button>
              <button 
                @click="changePage(currentPage + 1)"
                :disabled="currentPage === totalPages"
                class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
              >
                <i class="fa fa-chevron-right"></i>
              </button>
            </nav>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加景点模态框 -->
    <div v-if="showAddModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
      <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-auto">
        <div class="px-6 py-4 border-b border-gray-200">
          <h3 class="text-lg font-medium text-gray-900">添加新景点</h3>
        </div>
        <div class="px-6 py-4">
          <div class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">景点名称 <span class="text-red-500">*</span></label>
                <input 
                  type="text" 
                  v-model="spotForm.spot_name"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
                >
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">所在城市 <span class="text-red-500">*</span></label>
                <select 
                  v-model="spotForm.city_id"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
                >
                  <option v-for="city in cities" :key="city.id" :value="city.id">
                    {{ city.city_name }}
                  </option>
                </select>
              </div>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">景点描述</label>
              <textarea 
                v-model="spotForm.description"
                rows="3"
                class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
              ></textarea>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">详细地址 <span class="text-red-500">*</span></label>
              <input 
                type="text" 
                v-model="spotForm.address"
                class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
              >
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">开放时间</label>
                <input 
                  type="text" 
                  v-model="spotForm.opening_hours"
                  placeholder="例如：8:00-18:00"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
                >
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">门票价格</label>
                <input 
                  type="text" 
                  v-model="spotForm.ticket_price"
                  placeholder="例如：80元 或 免费"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
                >
              </div>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">图片URL</label>
              <input 
                type="text" 
                v-model="spotForm.image_url"
                placeholder="景点图片链接"
                class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
              >
            </div>
          </div>
        </div>
        <div class="px-6 py-4 bg-gray-50 rounded-b-lg flex justify-end space-x-3">
          <button 
            @click="showAddModal = false"
            class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
          >
            取消
          </button>
          <button 
            @click="submitAddSpot"
            class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary/90"
          >
            添加
          </button>
        </div>
      </div>
    </div>

    <!-- 编辑景点模态框 -->
    <div v-if="showEditModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
      <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-auto">
        <div class="px-6 py-4 border-b border-gray-200">
          <h3 class="text-lg font-medium text-gray-900">编辑景点</h3>
        </div>
        <div class="px-6 py-4">
          <div class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">景点名称 <span class="text-red-500">*</span></label>
                <input 
                  type="text" 
                  v-model="spotForm.spot_name"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
                >
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">所在城市 <span class="text-red-500">*</span></label>
                <select 
                  v-model="spotForm.city_id"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
                >
                  <option v-for="city in cities" :key="city.id" :value="city.id">
                    {{ city.city_name }}
                  </option>
                </select>
              </div>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">景点描述</label>
              <textarea 
                v-model="spotForm.description"
                rows="3"
                class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
              ></textarea>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">详细地址 <span class="text-red-500">*</span></label>
              <input 
                type="text" 
                v-model="spotForm.address"
                class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
              >
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">开放时间</label>
                <input 
                  type="text" 
                  v-model="spotForm.opening_hours"
                  placeholder="例如：8:00-18:00"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
                >
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">门票价格</label>
                <input 
                  type="text" 
                  v-model="spotForm.ticket_price"
                  placeholder="例如：80元 或 免费"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
                >
              </div>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">图片URL</label>
              <input 
                type="text" 
                v-model="spotForm.image_url"
                placeholder="景点图片链接"
                class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"
              >
              <div v-if="spotForm.image_url" class="mt-2">
                <img :src="spotForm.image_url" :alt="spotForm.spot_name" class="h-32 object-cover rounded-md">
              </div>
            </div>
          </div>
        </div>
        <div class="px-6 py-4 bg-gray-50 rounded-b-lg flex justify-end space-x-3">
          <button 
            @click="showEditModal = false"
            class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
          >
            取消
          </button>
          <button 
            @click="submitEditSpot"
            class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary/90"
          >
            保存
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
:root {
  --primary-color: #4f46e5;
}

.bg-primary {
  background-color: var(--primary-color);
}

.text-primary {
  color: var(--primary-color);
}

.hover\:text-primary\/80:hover {
  color: rgba(79, 70, 229, 0.8);
}

.hover\:bg-primary\/90:hover {
  background-color: rgba(79, 70, 229, 0.9);
}

.focus\:ring-primary:focus {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.5);
}

.focus\:border-primary:focus {
  border-color: var(--primary-color);
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
</style>